<template>
    <div style="margin: 0px auto">
        <h1 align="center">添加公告</h1>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">

            <el-form-item label="分店名称">
                <el-select placeholder="请选择" style="width: 300px">
                    <el-option
                            v-for="item in stores"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="发布时间" required>
                <el-col :span="11">
                    <el-form-item prop="createtime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.createtime"
                                        style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item label="公告内容" prop="noticecontent">
                <el-input type="textarea" v-model="form.noticecontent"></el-input>
            </el-form-item>

            <el-form-item style="margin-left: 100px">
                <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "addnotice",
        //测试用的数据
        data() {
            return {
                //分店
                stores: [{
                    ID: '',
                    title: '',
                    name: '',
                    region: ''
                }],
                //公告
                form: {
                    //公告ID
                    ID: '',
                    //分店ID
                    storeid: '',
                    //日期
                    createtime: '',
                    //公告内容
                    noticecontent: ''
                },

            }
        }, rules: {
            path: [
                {type: 'text', required: true, message: '请输入链接地址', trigger: 'change'}
            ],
            createtime: [
                {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
            ],
            noticecontent: [
                {required: true, message: '请填写活动形式', trigger: 'blur'}
            ]
        },
        methods: {
            //立即创建方法
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        window.console.log('error submit!!');
                        return false;
                    }
                });
            }
            ,
            //重置方法
            resetForm(form) {
                this.$refs[form].resetFields();
            }
        }
    }
</script>

<style scoped>

</style>